<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>ajax请求超时和取消请求</h1>
    <button class="btn1">点击我发送get方法的ajax</button>
    <button class="btn2">点击发送get形式的ajax按钮二</button>
    <button class="btn3">点击我取消上一个ajax</button>
    <script>
      // 一、请求超时
      // ajax 请求时间过长
      // 1.设置请求超时时间 ： xhr.timeout = 2000;
      // 2.监听请求超时的事件 : xhr.ontimeout = function(){// 请求超时后需要干的事情};
      // let btn1 = document.querySelector(".btn1");
      // btn1.onclick = function(){
      //     let xhr = new XMLHttpRequest();
      //     xhr.open("get","/getdata");
      //     // 设置请求超时时间，如果ajax请求超过了这个时间，那么ajax会自动停止请求。
      //     xhr.timeout = 3000; // 设置请求超时 2s钟。
      //     xhr.ontimeout = function(){  // 请求超时之后会触发的事件
      //         alert("网络异常");
      //     }
      //     xhr.onload = function(){
      //         if(xhr.status>=200 && xhr.status<300){
      //             console.log(xhr.responseText);
      //         }
      //     }
      //     xhr.send();
      // }

      // 二、取消ajax请求
      /* 
        xhr.abort();
        xhr.onabort = function(){} // 注意需要先绑定，在触发事件
        
        
        */
      let btn2 = document.querySelector(".btn2");
      let xhr; // 声明一个全局变量
      btn2.onclick = function () {
        if (typeof xhr !== "undefined") {
          // 证明xhr被赋值了，开启了一个ajax
          xhr.abort(); // 取消
        }

        xhr = new XMLHttpRequest();
        xhr.open("get", "/getajax");
        xhr.send();
        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);
          }
        };
      };

      // 取消ajax ：xhr.abort()
      // 取消ajax的请求的事件  xhr.onabort = funciton(){}
      let btn3 = document.querySelector(".btn3");
      btn3.onclick = function () {
        xhr.onabort = function () {
          //注意需要先绑定事件，在触发事件
          alert("取消了ajax请求");
        };
        xhr.abort(); //取消ajax。
      };
    </script>
  </body>
</html>
